<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/js/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
<!--    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>-->
    <title>上传背景图片</title>
    <style>
        .imageView {
            height: 22%;
            width: 20%;
            margin: 10px;
        }

        .image {
            height: 90%;
            width: 100%;
            border-radius: 20px;
        }

        .content {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            margin: 20px;
        }

        .formDiv {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .inputDiv {
            display: flex;
            flex-direction: column;
            height: 200px;
            justify-content: space-around;
        }

        .imageDiv {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .commonDiv {
            height: 200px;
            width: 200px;
            margin: 5px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script type="text/javascript">
        // 将函数绑定到文档的就绪事件（当文档完成加载时）
    $(document).ready(function(){
        $(".container").on('click','.image',function(){
            console.log(" click image");
            var _this = $(this);//将当前的pimg元素作为_this传入函数  
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); 
        })
        //$(".image").click(function(){  
        //    console.log(" click image");
        //    var _this = $(this);//将当前的pimg元素作为_this传入函数  
        //    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
        //});  
        function imgShow(outerdiv, innerdiv, bigimg, _this){  
            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
            $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
          
                /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
            $("<img/>").attr("src", src).on("load",(function(){  
                var windowW = $(window).width();//获取当前窗口宽度  
                var windowH = $(window).height();//获取当前窗口高度  
                var realWidth = this.width;//获取图片真实宽度  
                var realHeight = this.height;//获取图片真实高度  
                var imgWidth, imgHeight;  
                var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
                  
                if(realHeight>windowH*scale) {//判断图片高度  
                    imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
                    imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                    if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                        imgWidth = windowW*scale;//再对宽度进行缩放  
                    }  
                } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
                    imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
                } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                    imgWidth = realWidth;  
                    imgHeight = realHeight;  
                }  
                        $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
                  
                var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
                var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
                $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
                $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
            }));  
              
            $(outerdiv).click(function(){//再次点击淡出消失弹出层  
                $(this).fadeOut("fast");  
            });  
        }
        $("#getPic").click(
            function() {
                console.log("getPic");
                $.get(`/background-image/getImage?current=1&size=10`,function(data,status){
                    // alert("Data: " + data + "\nStatus: " + status);
                    console.log(data["records"]);
                    let pic = data["records"];
                    for(p of pic) {
                        console.log(p);
                        console.log(p["url"]);
                        $("#addImage").after(`<div class="commonDiv"><img src="${p['url']}" class="image" /></div>`)
                    }
                  });
            }
        );
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row row-cols-auto">

            <div class="commonDiv"><img th:src="${session.BackgroundImageBase64}" class="image" /></div>
            <div class="commonDiv"><img th:src="${url}" class="image" /></div>
            <div id="addImage" style="height: 0px;width: 0px;"></div>
            <!-- <div th:each="p:${pic}">
                <div class="commonDiv" th:text="${p.url}"></div>
                <div class="commonDiv"><img th:src="${p['url']}" class="image" /></div>
            </div> -->

        </div>
        <div class="row">
            <div class="col" >
                <button id="getPic">获取图片</button>
            </div>
        </div>
    </div>
    <div class="container" style="margin: 20px;">
        
        <!-- <div class="row justify-content-md-center">
            <div class="col-md-auto">
                <form th:action="@{/res/util/uploadFile}" method="post" enctype="multipart/form-data">
                    <div class="mb-5">
                        <label for="formFile" class="form-label">上传背景图片</label>
                        <input class="form-control" type="file" id="file" name="file">
                    </div>
                    <div class="mb-5 row">
                        <label for="inputPassword" class="col-sm-5 col-form-label">图片别名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                    </div>
                    <input class="mb-5" type="submit" value="上传" />
                </form>
            </div>
           
        </div> -->
        <form class="row g-3" th:action="@{/res/util/uploadFile}" method="post" enctype="multipart/form-data">
            <div class="col-md-12">
              <label for="name" class="form-label">图片别名</label>
              <input type="text" class="form-control" id="name" name="name">
            </div>
            <!-- <div class="col-md-6">
              <label for="inputPassword4" class="form-label">Password</label>
              <input type="password" class="form-control" id="inputPassword4">
            </div> -->
            <div class="col-12">
                <label for="formFile" class="form-label">上传背景图片</label>
                <input class="form-control" type="file" id="file" name="file">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">上传</button>
            </div>
          </form>
        
    </div>

    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>


</body>

</html>